<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
    <script src="scripts/libs/jquery.js"></script>
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/bootstrap.min.js" ></script>
    <script src="bootstrap/js/jquery-1.11.1.min.js"></script>
    <link rel="stylesheet" href="css/lunbo.css">
    <link rel="stylesheet" href="css/peijian.css">
    <link rel="stylesheet" href="css/footer.css">
</head>
<body>

<header>
    <div id="nav">
        <div id="nav-bar">
            <ul>
                <li><a href="">小米商城</a></li>
                <section></section>
                <li><a href="">MIUI</a></li>
                <section></section>
                <li><a href="">米聊</a></li>
                <section></section>
                <li><a href="">游戏</a></li>
                <section></section>
                <li><a href="">多看阅读</a></li>
                <section></section>
                <li><a href="">云服务</a></li>
                <section></section>
                <li><a href="">金融</a></li>
                <section></section>
                <li><a href="">小米商城移动版</a></li>
                <section></section>
                <li><a href="">问题反馈</a></li>
                <section></section>
                <li><a href="">Select Region</a></li>
                </ul>
            <ul>
                    <li><a href="">登录</a></li>
                    <section></section>
                    <li><a href="">注册</a></li>
                    <section></section>
                    <li><a href="">消息通知</a></li>
                    <li id="liEle">
                        <a href="" class="nav-last-aEle">
                            <span class="glyphicon glyphicon-shopping-cart"></span>
                            购物车( 0 )
                        </a>
                     </li>
            </ul>
        </div>
    </div>
    </header>
<!--*********************下 拉 菜 单******************-->
    <div id="nav-mi">
        <img src="img/1.png" alt="">
        <div id="nav-mi-wrap">
            <ul>
                <li>
                <a href="">小米手机</a>
                <ul>
                    <figure>
                    <li><img src="img/2.jpg" alt=""></li>
                    <figcaption>小米Note2</figcaption>
                    <figcaption>2799元起</figcaption>
                </figure>
                    <figure>
                        <li><img src="img/4.jpg" alt=""></li>
                        <figcaption>小米Note2</figcaption>
                        <figcaption>2799元起</figcaption>
                    </figure> <figure>
                    <li><img src="img/5.jpg" alt=""></li>
                    <figcaption>小米Note2</figcaption>
                    <figcaption>2799元起</figcaption>
                </figure>
                    <figure>
                    <li><img src="img/6.jpg" alt=""></li>
                    <figcaption>小米Note2</figcaption>
                    <figcaption>2799元起</figcaption>
                </figure>
                    <figure>
                        <li><img src="img/7.jpg" alt=""></li>
                        <figcaption>小米Note2</figcaption>
                        <figcaption>2799元起</figcaption>
                    </figure>
                    <figure>
                        <li><img src="img/8.jpg" alt=""></li>
                        <figcaption>小米Note2</figcaption>
                        <figcaption>2799元起</figcaption>
                    </figure>
                </ul>
            </li>
                <li>
                    <a href="">红米</a>
                    <ul>
                        <figure>
                            <li><img src="img/9.jpg" alt=""></li>
                            <figcaption>小米Note2</figcaption>
                            <figcaption>2799元起</figcaption>
                        </figure>
                        <figure>
                            <li><img src="img/2.jpg" alt=""></li>
                            <figcaption>小米Note2</figcaption>
                            <figcaption>2799元起</figcaption>
                        </figure>
                        <figure>
                            <li><img src="img/2.jpg" alt=""></li>
                            <figcaption>小米Note2</figcaption>
                            <figcaption>2799元起</figcaption>
                        </figure>
                        <figure>
                            <li><img src="img/2.jpg" alt=""></li>
                            <figcaption>小米Note2</figcaption>
                            <figcaption>2799元起</figcaption>
                        </figure>
                    </ul>
                </li>
                <li>
                    <a href="">平板*笔记本</a>
                    <ul>
                        <figure>
                            <li><img src="img/2.jpg" alt=""></li>
                            <figcaption>小米Note2</figcaption>
                            <figcaption>2799元起</figcaption>
                        </figure>
                        <figure>
                            <li><img src="img/2.jpg" alt=""></li>
                            <figcaption>小米Note2</figcaption>
                            <figcaption>2799元起</figcaption>
                        </figure>
                        <figure>
                            <li><img src="img/2.jpg" alt=""></li>
                            <figcaption>小米Note2</figcaption>
                            <figcaption>2799元起</figcaption>
                        </figure>
                    </ul>
                </li>
                <li>
                    <a href="">电视</a>
                    <ul>
                            <figure>
                                <li><img src="img/2.jpg" alt=""></li>
                                <figcaption>小米Note2</figcaption>
                                <figcaption>2799元起</figcaption>
                            </figure>
                            <figure>
                                <li><img src="img/2.jpg" alt=""></li>
                                <figcaption>小米Note2</figcaption>
                                <figcaption>2799元起</figcaption>
                            </figure>
                    </ul>
                </li>
                <li>
                <a href="">盒子*影音</a>
                <ul>
                    <figure>
                        <li><img src="img/2.jpg" alt=""></li>
                        <figcaption>小米Note2</figcaption>
                        <figcaption>2799元起</figcaption>
                    </figure>
                </ul>
            </li>
                <li>
                    <a href="">路由器</a>
                    <ul>
                        <figure>
                            <li><img src="img/2.jpg" alt=""></li>
                            <figcaption>小米Note2</figcaption>
                            <figcaption>2799元起</figcaption>
                        </figure>
                        <figure>
                            <li><img src="img/2.jpg" alt=""></li>
                            <figcaption>小米Note2</figcaption>
                            <figcaption>2799元起</figcaption>
                        </figure>
                        <figure>
                            <li><img src="img/2.jpg" alt=""></li>
                            <figcaption>小米Note2</figcaption>
                            <figcaption>2799元起</figcaption>
                        </figure>
                    </ul>
                </li>
                <li>
                    <a href="">智能硬件</a>
                    <ul>
                        <figure>
                            <li><img src="img/2.jpg" alt=""></li>
                            <figcaption>小米Note2</figcaption>
                            <figcaption>2799元起</figcaption>
                        </figure>
                        <figure>
                            <li><img src="img/2.jpg" alt=""></li>
                            <figcaption>小米Note2</figcaption>
                            <figcaption>2799元起</figcaption>
                        </figure>
                    </ul>
                </li>
                <li>
                <a href="">服务</a>
            </li>
                <li>
                    <a href="">社区</a>
                </li>
            </ul>
        </div>
        <!--搜索栏-->
        <div class="input-group">
            <input type="text" class="form-control" id="formControl">
            <span class="input-group-btn">
						<button class="btn btn-default" type="button" id="btn-hover">
							  <span class="glyphicon glyphicon-search"></span>
						</button>
					</span>
        </div>
</div>
<!--轮播图-->
<div id="allControl">
<div id="myCarousel" class="carousel slide">
    <!-- 轮播（Carousel）指标 -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <!-- 轮播（Carousel）项目 -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="img/10.jpg" alt="First slide">
        </div>
        <div class="item">
            <img src="img/11.jpg" alt="Second slide">
        </div>
        <div class="item">
            <img src="img/12.jpg" alt="Third slide">
        </div>
    </div>
    <!-- 轮播（Carousel）导航 -->
    <a class="carousel-control left" href="#myCarousel"
       data-slide="prev"><span> < </span></a>
    <a class="carousel-control right" href="#myCarousel"
       data-slide="next"><span> > </span></a>
</div>
    <div class="allControl-list">
  <div class="list-left">
      <ul>
          <li>
              <a href="">手机 电话 <span> > </span></a>
              <ul>
                  <li><img src="img/heyue.jpg" alt="">大米Note</li>
                  <li><img src="img/mipad.jpg" alt="">大米Note</li>
                  <li><img src="img/minote.jpg" alt="">大米Note</li>
                  <li><img src="img/yicamera.jpg" alt="">大米Note</li>
                  <li><img src="img/yidongdianyuan.jpg" alt="">大米Note</li>
              </ul>
          </li>
          <li>
              <a href="">笔记 平板  <span> > </span></a>
              <ul>
                  <li><img src="img/minote.jpg" alt="">大米Note</li>
                  <li><img src="img/mipad.jpg" alt="">大米Note</li>
                  <li><img src="img/xiaoyi.jpg" alt="">大米Note</li>
              </ul>
          </li>
          <li>
              <a href="">电视 盒子  <span> > </span></a>
              <ul>
                  <li><img src="img/minote.jpg" alt="">大米Note</li>
                  <li><img src="img/yicamera.jpg" alt="">大米Note</li>
                  <li><img src="img/yidongdianyuan.jpg" alt="">大米Note</li>
              </ul>
          </li>
          <li>
              <a href="">路由器 智能硬件 <span> > </span></a>
              <ul>
                  <li><img src="img/minote.jpg" alt="">大米Note</li>
                  <li><img src="img/headphone" alt="">大米Note</li>
                  <li><img src="img/heyue.jpg" alt="">大米Note</li>
                  <li><img src="img/minote.jpg" alt="">大米Note</li>
                  <li><img src="img/headphone" alt="">大米Note</li>
                  <li><img src="img/heyue.jpg" alt="">大米Note</li>
              </ul>
          </li>
          <li>
              <a href="">移动电源 电池  <span> > </span></a>
              <ul>
                  <li><img src="img/heyue.jpg" alt="">大米Note</li>
                  <li><img src="img/headphone" alt="">大米Note</li>
                  <li><img src="img/minote.jpg" alt="">大米Note</li>
              </ul>
          </li>
          <li>
              <a href="">耳机 音响  <span> > </span></a>
              <ul>
                  <li><img src="img/minote.jpg" alt="">大米Note</li>
                  <li><img src="img/headphone" alt="">大米Note</li>
                  <li><img src="img/heyue.jpg" alt="">大米Note</li>
              </ul>
          </li>
          <li>
              <a href="">手机 平板  <span> > </span></a>
              <ul>
                  <li><img src="img/minote.jpg" alt="">大米Note</li>
                  <li><img src="img/telcom.jpg" alt="">大米Note</li>
                  <li><img src="img/wan.jpg" alt="">大米Note</li>
                  <img src="img/minote.jpg" alt="">
              </ul>
          </li>
          <li>
              <a href="">保护套 贴膜  <span> > </span></a>
              <ul>
                  <li><img src="img/minote.jpg" alt="">大米Note</li>
                  <li><img src="img/tv48.jpg" alt="">大米Note</li>
                  <li><img src="img/zipaigan.jpg" alt="">大米Note</li>
              </ul>
          </li>
          <li>
              <a href="">线材 支架 <span> > </span></a>
              <ul>
                  <li><img src="img/minote.jpg" alt="">大米Note</li>
                  <li><img src="img/zhinengtaozhuang.jpg" alt="">大米Note</li>
                  <li><img src="img/zhoubian.jpg" alt="">大米Note</li>
              </ul>
          </li>
          <li>
              <a href="">箱包 服饰  <span> > </span></a>
              <ul>
                  <li>大米Note</li>
                  <li>大米4s</li>
                  <li>红米手机</li>
              </ul> <ul>
              <li><img src="img/minote.jpg" alt="">大米Note</li>
              <li><img src="img/mipad.jpg" alt="">大米Note</li>
              <li><img src="img/zhongxin.jpg" alt="">大米Note</li>
              <li><img src="img/headphone" alt="">大米Note</li>
              <li><img src="img/heyue.jpg" alt="">大米Note</li>
              <li><img src="img/minote.jpg" alt="">大米Note</li>
              <li><img src="img/headphone" alt="">大米Note</li>
              <li><img src="img/heyue.jpg" alt="">大米Note</li>
          </ul>
          </li>

      </ul>
    </div>
    </div>
</div>
<!--第一个轮播图下的图片-->
<div id="control-down">
    <div>
        <section>
            <figure>
                <span class="glyphicon glyphicon-phone"></span>
                <figcaption>
                    选购手机
                </figcaption>
            </figure>
            <!--<span></span>-->

        </section>
        <section>
            <figure>
                <span class=" glyphicon glyphicon-retweet"></span>
                <figcaption>
                    企业团购
                </figcaption>
            </figure>
        </section>
        <section>
            <figure>
                <span class="glyphicon glyphicon-briefcase"></span>
                <figcaption>
                    官方产品
                </figcaption>
            </figure>
        </section>
        <section>
            <figure>
                <span class=" glyphicon glyphicon-globe "></span>
                <figcaption>
                    小米移动
                </figcaption>
            </figure>
        </section>
        <section>
            <figure>
                <span class="glyphicon glyphicon-log-in"></span>
                <figcaption>
                    以旧换新
                </figcaption>
            </figure>
        </section>
        <section>
            <figure>
                <span class=" glyphicon glyphicon-compressed "></span>
                <figcaption>
                    话费充值
                </figcaption>
            </figure>
        </section>
    </div>
    <img src="img/26.jpg" alt="">
    <img src="img/27.jpg" alt="">
    <img src="img/28.jpg" alt="">
</div>
<!--小米明星单品-->
<div id="mi-superStar">
    <h2>小米明星单品</h2>
    <div class="sectionEle">
        <section> > </section>
        <section> < </section>
    </div>
    <div class="mi-superStar-img">
        <div>
            <figure>
                <img src="img/29.png" alt="">
                <figcaption>小米5s</figcaption>
                <figcaption>最高可享花呗12期分期</figcaption>
                <figcaption>1899元起</figcaption>
            </figure>
        </div>
        <div>
            <figure>
                <img src="img/30.jpg" alt="">
                <figcaption>小米体重秤</figcaption>
                <figcaption>100克，喝杯水都可感知的精准</figcaption>
                <figcaption> 99元</figcaption>
            </figure>
        </div>
        <div>
            <figure>
                <img src="img/31.png" alt="">
                <figcaption>小米路由器3</figcaption>
                <figcaption>更快更强，不止四天线</figcaption>
                <figcaption> 149元</figcaption>
            </figure>
        </div>
        <div>
            <figure>
                <img src="img/32.png" alt="">
                <figcaption> 小米电视3s 55英寸</figcaption>
                <figcaption>  人工智能电视，4K大屏新旗舰</figcaption>
                <figcaption> 3699元起</figcaption>
            </figure>
        </div>
        <div>
            <figure>
                <img src="img/33.jpg" alt="">
                <figcaption>小米圈铁耳机Pro</figcaption>
                <figcaption> 独创双动圈+动铁 三单元发声</figcaption>
                <figcaption>149元</figcaption>
            </figure>
        </div>
    </div>
</div>
<!--*全部种类单品*-->
<!--智能硬件-->
<div id="all">
<div class="mi-allKinds">
<div class="floatEle">
    <h2>智能硬件</h2>
    <section>查看全部 <section> > </section> </section>
</div>
    <div class="zhiNeng">
    <img src="img/36.jpg" alt="">
    <div class="allKinds-right">

        <figure>
            <img src="img/37.jpg" alt="">
            <figcaption>20000mAh小米移动电源2</figcaption>
            <figcaption> 149元</figcaption>
            <figcaption>3287人评价</figcaption>
        </figure>
        <figure>
            <img src="img/38.jpg" alt="">
            <figcaption>20000mAh小米移动电源2</figcaption>
            <figcaption> 149元</figcaption>
            <figcaption>3287人评价</figcaption>
        </figure>
        <figure>
            <img src="img/39.jpg" alt="">
            <figcaption>20000mAh小米移动电源2</figcaption>
            <figcaption> 149元</figcaption>
            <figcaption>3287人评价</figcaption>
        </figure>
        <figure>
            <img src="img/40.jpg" alt="">
            <figcaption>20000mAh小米移动电源2</figcaption>
            <figcaption> 149元</figcaption>
            <figcaption>3287人评价</figcaption>
        </figure>
        <figure>
            <img src="img/41.jpg" alt="">
            <figcaption>20000mAh小米移动电源2</figcaption>
            <figcaption> 149元</figcaption>
            <figcaption>3287人评价</figcaption>
        </figure>
       <figure>
           <img src="img/42.jpg" alt="">
           <figcaption>20000mAh小米移动电源2</figcaption>
           <figcaption> 149元</figcaption>
           <figcaption>3287人评价</figcaption>
       </figure>
        <figure>
            <img src="img/43.jpg" alt="">
            <figcaption>20000mAh小米移动电源2</figcaption>
            <figcaption> 149元</figcaption>
            <figcaption>3287人评价</figcaption>
        </figure>
        <figure>
            <img src="img/44.jpg" alt="">
            <figcaption>20000mAh小米移动电源2</figcaption>
            <figcaption> 149元</figcaption>
            <figcaption>3287人评价</figcaption>
        </figure>
    </div>
    </div>

    <!--搭配--------最新练习-->
    <div class="mi-peijian">
        <div class="peijian-wrap">
            <h2>搭配</h2>
            <ul class="peijian-wrap-ul">
                <li class="active">热门</li>
                <li>保护套</li>
                <li>贴膜</li>
                <li>其他配件</li>
            </ul>
        </div>
            <div class="peijian-container">
                <div class="con show">
                    <figure>
                        <img src="img/50.jpg" alt="">
                        <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                        <figcaption> 149元</figcaption>
                        <figcaption>3287人评价</figcaption>
                    </figure>

                    <figure>
                        <img src="img/51.jpg" alt="">
                        <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                        <figcaption> 149元</figcaption>
                        <figcaption>3287人评价</figcaption>
                    </figure>
                    <figure>
                        <img src="img/52.jpg" alt="">
                        <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                        <figcaption> 149元</figcaption>
                        <figcaption>3287人评价</figcaption>
                </figure>
                    <figure>
                        <img src="img/53.jpg" alt="">
                        <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                        <figcaption> 149元</figcaption>
                        <figcaption>3287人评价</figcaption>
                    </figure>
                    <figure>
                        <img src="img/54.jpg" alt="">
                        <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                        <figcaption> 149元</figcaption>
                        <figcaption>3287人评价</figcaption>
                    </figure>
                    <figure>
                        <img src="img/55.jpg" alt="">
                        <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                        <figcaption> 149元</figcaption>
                        <figcaption>3287人评价</figcaption>
                    </figure>
                    <figure>
                        <img src="img/56.jpg" alt="">
                        <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                        <figcaption> 149元</figcaption>
                        <figcaption>3287人评价</figcaption>
                    </figure>
                    <figure>
                        <img src="img/57.jpg" alt="">
                        <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                        <figcaption> 149元</figcaption>
                        <figcaption>3287人评价</figcaption>
                    </figure>
                </div>
                <div class="con">
                    <figure>
                        <img src="img/58.jpg" alt="">
                        <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                        <figcaption> 149元</figcaption>
                        <figcaption>3287人评价</figcaption>
                    </figure>

                    <figure>
                        <img src="img/59.jpg" alt="">
                        <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                        <figcaption> 149元</figcaption>
                        <figcaption>3287人评价</figcaption>
                    </figure>
                    <figure>
                        <img src="img/60.jpg" alt="">
                        <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                        <figcaption> 149元</figcaption>
                        <figcaption>3287人评价</figcaption>
                    </figure>
                    <figure>
                        <img src="img/61.jpg" alt="">
                        <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                        <figcaption> 149元</figcaption>
                        <figcaption>3287人评价</figcaption>
                    </figure>
                    <figure>
                        <img src="img/62.jpg" alt="">
                        <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                        <figcaption> 149元</figcaption>
                        <figcaption>3287人评价</figcaption>
                    </figure>
                    <figure>
                        <img src="img/63.jpg" alt="">
                        <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                        <figcaption> 149元</figcaption>
                        <figcaption>3287人评价</figcaption>
                    </figure>
                    <figure>
                        <img src="img/64.jpg" alt="">
                        <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                        <figcaption> 149元</figcaption>
                        <figcaption>3287人评价</figcaption>
                    </figure>
                    <figure>
                        <img src="img/65.jpg" alt="">
                        <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                        <figcaption> 149元</figcaption>
                        <figcaption>3287人评价</figcaption>
                    </figure>
                </div>
                <!--第三个-->
                <div class="con">
                    <figure>
                        <img src="img/66.jpg" alt="">
                        <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                        <figcaption> 149元</figcaption>
                        <figcaption>3287人评价</figcaption>
                    </figure>

                    <figure>
                        <img src="img/67.jpg" alt="">
                        <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                        <figcaption> 149元</figcaption>
                        <figcaption>3287人评价</figcaption>
                    </figure>
                    <figure>
                        <img src="img/68.jpg" alt="">
                        <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                        <figcaption> 149元</figcaption>
                        <figcaption>3287人评价</figcaption>
                    </figure>
                    <figure>
                        <img src="img/69.jpg" alt="">
                        <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                        <figcaption> 149元</figcaption>
                        <figcaption>3287人评价</figcaption>
                    </figure>
                    <figure>
                        <img src="img/70.jpg" alt="">
                        <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                        <figcaption> 149元</figcaption>
                        <figcaption>3287人评价</figcaption>
                    </figure>
                    <figure>
                        <img src="img/71.jpg" alt="">
                        <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                        <figcaption> 149元</figcaption>
                        <figcaption>3287人评价</figcaption>
                    </figure>
                    <figure>
                        <img src="img/72.jpg" alt="">
                        <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                        <figcaption> 149元</figcaption>
                        <figcaption>3287人评价</figcaption>
                    </figure>
                    <figure>
                        <img src="img/73.jpg" alt="">
                        <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                        <figcaption> 149元</figcaption>
                        <figcaption>3287人评价</figcaption>
                    </figure>
                </div>
                <div class="con">
                    <figure>
                        <img src="img/74.jpg" alt="">
                        <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                        <figcaption> 149元</figcaption>
                        <figcaption>3287人评价</figcaption>
                    </figure>

                    <figure>
                        <img src="img/59.jpg" alt="">
                        <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                        <figcaption> 149元</figcaption>
                        <figcaption>3287人评价</figcaption>
                    </figure>
                    <figure>
                        <img src="img/60.jpg" alt="">
                        <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                        <figcaption> 149元</figcaption>
                        <figcaption>3287人评价</figcaption>
                    </figure>
                    <figure>
                        <img src="img/61.jpg" alt="">
                        <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                        <figcaption> 149元</figcaption>
                        <figcaption>3287人评价</figcaption>
                    </figure>
                    <figure>
                        <img src="img/62.jpg" alt="">
                        <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                        <figcaption> 149元</figcaption>
                        <figcaption>3287人评价</figcaption>
                    </figure>
                    <figure>
                        <img src="img/63.jpg" alt="">
                        <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                        <figcaption> 149元</figcaption>
                        <figcaption>3287人评价</figcaption>
                    </figure>
                    <figure>
                        <img src="img/64.jpg" alt="">
                        <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                        <figcaption> 149元</figcaption>
                        <figcaption>3287人评价</figcaption>
                    </figure>
                    <figure>
                        <img src="img/65.jpg" alt="">
                        <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                        <figcaption> 149元</figcaption>
                        <figcaption>3287人评价</figcaption>
                    </figure>
                </div>
            </div>

            <div class="peijian-left">
                <img src="img/peijian-1.jpg" alt="">
                <img src="img/peijian-2.jpg" alt="">
            </div>

    </div>
    <!--配件-->
    <div class="mi-peijian">
        <div class="peijian-wrap">
            <h2>配件</h2>
            <ul class="peijian-wrap-ul">
                <li class="active">热门</li>
                <li>保护套</li>
                <li>贴膜</li>
                <li>其他配件</li>
            </ul>
        </div>
        <div class="peijian-container">
            <div class="con show">
                <figure>
                    <img src="img/50.jpg" alt="">
                    <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                    <figcaption> 149元</figcaption>
                    <figcaption>3287人评价</figcaption>
                </figure>

                <figure>
                    <img src="img/51.jpg" alt="">
                    <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                    <figcaption> 149元</figcaption>
                    <figcaption>3287人评价</figcaption>
                </figure>
                <figure>
                    <img src="img/52.jpg" alt="">
                    <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                    <figcaption> 149元</figcaption>
                    <figcaption>3287人评价</figcaption>
                </figure>
                <figure>
                    <img src="img/53.jpg" alt="">
                    <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                    <figcaption> 149元</figcaption>
                    <figcaption>3287人评价</figcaption>
                </figure>
                <figure>
                    <img src="img/54.jpg" alt="">
                    <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                    <figcaption> 149元</figcaption>
                    <figcaption>3287人评价</figcaption>
                </figure>
                <figure>
                    <img src="img/55.jpg" alt="">
                    <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                    <figcaption> 149元</figcaption>
                    <figcaption>3287人评价</figcaption>
                </figure>
                <figure>
                    <img src="img/56.jpg" alt="">
                    <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                    <figcaption> 149元</figcaption>
                    <figcaption>3287人评价</figcaption>
                </figure>
                <figure>
                    <img src="img/57.jpg" alt="">
                    <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                    <figcaption> 149元</figcaption>
                    <figcaption>3287人评价</figcaption>
                </figure>
            </div>
            <div class="con">
                <figure>
                    <img src="img/58.jpg" alt="">
                    <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                    <figcaption> 149元</figcaption>
                    <figcaption>3287人评价</figcaption>
                </figure>

                <figure>
                    <img src="img/59.jpg" alt="">
                    <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                    <figcaption> 149元</figcaption>
                    <figcaption>3287人评价</figcaption>
                </figure>
                <figure>
                    <img src="img/60.jpg" alt="">
                    <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                    <figcaption> 149元</figcaption>
                    <figcaption>3287人评价</figcaption>
                </figure>
                <figure>
                    <img src="img/61.jpg" alt="">
                    <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                    <figcaption> 149元</figcaption>
                    <figcaption>3287人评价</figcaption>
                </figure>
                <figure>
                    <img src="img/62.jpg" alt="">
                    <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                    <figcaption> 149元</figcaption>
                    <figcaption>3287人评价</figcaption>
                </figure>
                <figure>
                    <img src="img/63.jpg" alt="">
                    <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                    <figcaption> 149元</figcaption>
                    <figcaption>3287人评价</figcaption>
                </figure>
                <figure>
                    <img src="img/64.jpg" alt="">
                    <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                    <figcaption> 149元</figcaption>
                    <figcaption>3287人评价</figcaption>
                </figure>
                <figure>
                    <img src="img/65.jpg" alt="">
                    <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                    <figcaption> 149元</figcaption>
                    <figcaption>3287人评价</figcaption>
                </figure>
            </div>
            <!--第三个-->
            <div class="con">
                <figure>
                    <img src="img/66.jpg" alt="">
                    <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                    <figcaption> 149元</figcaption>
                    <figcaption>3287人评价</figcaption>
                </figure>

                <figure>
                    <img src="img/67.jpg" alt="">
                    <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                    <figcaption> 149元</figcaption>
                    <figcaption>3287人评价</figcaption>
                </figure>
                <figure>
                    <img src="img/68.jpg" alt="">
                    <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                    <figcaption> 149元</figcaption>
                    <figcaption>3287人评价</figcaption>
                </figure>
                <figure>
                    <img src="img/69.jpg" alt="">
                    <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                    <figcaption> 149元</figcaption>
                    <figcaption>3287人评价</figcaption>
                </figure>
                <figure>
                    <img src="img/70.jpg" alt="">
                    <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                    <figcaption> 149元</figcaption>
                    <figcaption>3287人评价</figcaption>
                </figure>
                <figure>
                    <img src="img/71.jpg" alt="">
                    <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                    <figcaption> 149元</figcaption>
                    <figcaption>3287人评价</figcaption>
                </figure>
                <figure>
                    <img src="img/72.jpg" alt="">
                    <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                    <figcaption> 149元</figcaption>
                    <figcaption>3287人评价</figcaption>
                </figure>
                <figure>
                    <img src="img/73.jpg" alt="">
                    <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                    <figcaption> 149元</figcaption>
                    <figcaption>3287人评价</figcaption>
                </figure>
            </div>
            <div class="con">
                <figure>
                    <img src="img/74.jpg" alt="">
                    <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                    <figcaption> 149元</figcaption>
                    <figcaption>3287人评价</figcaption>
                </figure>

                <figure>
                    <img src="img/59.jpg" alt="">
                    <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                    <figcaption> 149元</figcaption>
                    <figcaption>3287人评价</figcaption>
                </figure>
                <figure>
                    <img src="img/60.jpg" alt="">
                    <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                    <figcaption> 149元</figcaption>
                    <figcaption>3287人评价</figcaption>
                </figure>
                <figure>
                    <img src="img/61.jpg" alt="">
                    <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                    <figcaption> 149元</figcaption>
                    <figcaption>3287人评价</figcaption>
                </figure>
                <figure>
                    <img src="img/62.jpg" alt="">
                    <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                    <figcaption> 149元</figcaption>
                    <figcaption>3287人评价</figcaption>
                </figure>
                <figure>
                    <img src="img/63.jpg" alt="">
                    <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                    <figcaption> 149元</figcaption>
                    <figcaption>3287人评价</figcaption>
                </figure>
                <figure>
                    <img src="img/64.jpg" alt="">
                    <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                    <figcaption> 149元</figcaption>
                    <figcaption>3287人评价</figcaption>
                </figure>
                <figure>
                    <img src="img/65.jpg" alt="">
                    <figcaption>小米小钢炮蓝牙音箱2</figcaption>
                    <figcaption> 149元</figcaption>
                    <figcaption>3287人评价</figcaption>
                </figure>
            </div>
        </div>

        <div class="peijian-left">
            <img src="img/peijian-1.jpg" alt="">
            <img src="img/peijian-2.jpg" alt="">
        </div>

    </div>

<!--为你推荐-->
    <div class="for-you">
        <h2>为你推荐</h2>
        <div class="sectionEle">
            <section> > </section>
            <section> < </section>
        </div>
        <div class="mi-superStar-img">
            <div>
                <figure>
                    <img src="img/29.png" alt="">
                    <figcaption>小米5s</figcaption>
                    <figcaption>最高可享花呗12期分期</figcaption>
                    <figcaption>1899元起</figcaption>
                </figure>
            </div>
            <div>
                <figure>
                    <img src="img/30.jpg" alt="">
                    <figcaption>小米体重秤</figcaption>
                    <figcaption>100克，喝杯水都可感知的精准</figcaption>
                    <figcaption> 99元</figcaption>
                </figure>
            </div>
            <div>
                <figure>
                    <img src="img/31.png" alt="">
                    <figcaption>小米路由器3</figcaption>
                    <figcaption>更快更强，不止四天线</figcaption>
                    <figcaption> 149元</figcaption>
                </figure>
            </div>
            <div>
                <figure>
                    <img src="img/32.png" alt="">
                    <figcaption> 小米电视3s 55英寸</figcaption>
                    <figcaption>  人工智能电视，4K大屏新旗舰</figcaption>
                    <figcaption> 3699元起</figcaption>
                </figure>
            </div>
            <div>
                <figure>
                    <img src="img/33.jpg" alt="">
                    <figcaption>小米圈铁耳机Pro</figcaption>
                    <figcaption> 独创双动圈+动铁 三单元发声</figcaption>
                    <figcaption>149元</figcaption>
                </figure>
            </div>
        </div>
    </div>
<!--热评产品-->
    <div class="mi-hot-review">
        <h2>热评产品</h2>
       <div class="hot-review">

        <figure>
            <img src="img/81.jpg" alt="">
            <figcaption>这个摄像机太好用了，非常喜欢而且做工精细漂亮。</figcaption>
            <figcaption>来自于 浪漫小浣熊 的评价 </figcaption>
            <figcaption><span>米家小白智能摄像机</span>|<span>399元</span> </figcaption>
        </figure>
        <figure>
            <img src="img/83.jpg" alt="">
            <figcaption>
              拿到手，感觉很炫！试了一下，音质挺好！挺喜欢！5星好评
            </figcaption>
            <figcaption>来自于 滚滚滚 的评价 </figcaption>
            <figcaption><span>米家小白智能摄像机</span>|<span>399元</span> </figcaption>
        </figure>
        <figure>
            <img src="img/82.jpg" alt="">
            <figcaption>这个摄像机太好用了，非常喜欢而且做工精细漂亮。</figcaption>
            <figcaption>来自于 你在哪里等雨 的评价 </figcaption>
            <figcaption><span>米家小白智能摄像机</span>|<span>399元</span> </figcaption>
        </figure>
        <figure>
            <img src="img/84.jpg" alt="">
            <figcaption>
             安装简洁方便，信号不错！！！！！
            </figcaption>
            <figcaption>来自于 元宵节 的评价 </figcaption>
            <figcaption><span>米家小白智能摄像机</span>|<span>399元</span> </figcaption>
        </figure>
    </div>
    </div>
    <!--内容-->
<div class="content">
    <h2>内容</h2>
    <div class="content-demo">
            <!--<center>?-->
            <div class="demo">
            <!--<a class="control prev"> < </a> <a class="control next abs"> > </a>&lt;!&ndash;自定义按钮，移动端可不写&ndash;&gt;-->
            <div class="slider"><!--主体结构，请用此类名调用插件，此类名可自定义-->
                <ul>
                    <li>
                        <a href="">
                            <div class="slider-div">
                                <h2>图书</h2>
                                <p>海量好书，享受精品阅读时光</p>
                                <p>漂亮的中文排版，千万读者选择！</p>
                                <p>前往多看阅读</p>
                           </div>
                     <img src="img/85.png" alt="" />
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div class="slider-div">
                                <h2>图书</h2>
                                <p>海量好书，享受精品阅读时光</p>
                                <p>漂亮的中文排版，千万读者选择！</p>
                                <p>前往多看阅读</p>
                            </div>
                            <img src="img/86.jpg" alt="" />
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div class="slider-div">
                                <h2>图书</h2>
                                <p>海量好书，享受精品阅读时光</p>
                                <p>漂亮的中文排版，千万读者选择！</p>
                                <p>前往多看阅读</p>
                            </div>
                            <img src="img/87.png" alt="" />
                        </a>
                    </li>

                </ul>
            </div>
        </div>
        <!--<script src="js/jquery.min.js"></script>-->
        <script src="scripts/js/YuxiSlider.jQuery.min.js"></script>
    <div class="demo">
        <!--<a class="control prev"> < </a> <a class="control next abs"> > </a>&lt;!&ndash;自定义按钮，移动端可不写&ndash;&gt;-->
        <div class="slider"><!--主体结构，请用此类名调用插件，此类名可自定义-->

            <ul>

                <li>
                    <a href="">
                        <div class="slider-div">
                            <h2>MIUI 主题</h2>
                            <p>海量好书，享受精品阅读时光</p>
                            <p>漂亮的中文排版，千万读者选择！</p>
                            <p>前往多看阅读</p>
                        </div>
                        <img src="img/88.jpg" alt="" />
                    </a>
                </li>
                <li>
                    <a href="">
                        <div class="slider-div">
                            <h2>MIUI 主题</h2>
                            <p>海量好书，享受精品阅读时光</p>
                            <p>漂亮的中文排版，千万读者选择！</p>
                            <p>前往多看阅读</p>
                        </div>
                        <img src="img/89.jpg" alt="" />
                    </a>
                </li>
                <li>
                    <a href="">
                        <div class="slider-div">
                            <h2>MIUI 主题</h2>
                            <p>海量好书，享受精品阅读时光</p>
                            <p>漂亮的中文排版，千万读者选择！</p>
                            <p>前往多看阅读</p>
                        </div>
                        <img src="img/90.jpg" alt="" />
                    </a>
                </li>

            </ul>
        </div>
    </div>
    <!--<script src="js/jquery.min.js"></script>-->
    <script src="scripts/js/YuxiSlider.jQuery.min.js"></script>
    <div class="demo">
        <!--<a class="control prev"> < </a> <a class="control next abs"> > </a>&lt;!&ndash;自定义按钮，移动端可不写&ndash;&gt;-->
        <div class="slider"><!--主体结构，请用此类名调用插件，此类名可自定义-->
            <ul>
                <li>
                    <a href="">
                        <div class="slider-div">
                            <h2>游戏</h2>
                            <p>海量好书，享受精品阅读时光</p>
                            <p>漂亮的中文排版，千万读者选择！</p>
                            <p>前往多看阅读</p>
                        </div>
                        <img src="img/91.jpg" alt="" />
                    </a>
                </li>
                <li>
                    <a href="">
                        <div class="slider-div">
                            <h2>游戏</h2>
                            <p>海量好书，享受精品阅读时光</p>
                            <p>漂亮的中文排版，千万读者选择！</p>
                            <p>前往多看阅读</p>
                        </div>
                        <img src="img/92.jpg" alt="" />
                    </a>
                </li>
                <li>
                    <a href="">
                        <div class="slider-div">
                            <h2>游戏</h2>
                            <p>海量好书，享受精品阅读时光</p>
                            <p>漂亮的中文排版，千万读者选择！</p>
                            <p>前往多看阅读</p>
                        </div>
                        <img src="img/93.jpg" alt="" />
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!--<script src="js/jquery.min.js"></script>-->
    <script src="scripts/js/YuxiSlider.jQuery.min.js"></script>
    <div class="demo">
        <!--<a class="control prev"> < </a> <a class="control next abs"> > </a>&lt;!&ndash;自定义按钮，移动端可不写&ndash;&gt;-->
        <div class="slider"><!--主体结构，请用此类名调用插件，此类名可自定义-->
            <ul>
                <li>
                    <a href="">
                        <div class="slider-div">
                            <h2>应用</h2>
                            <p>海量好书，享受精品阅读时光</p>
                            <p>漂亮的中文排版，千万读者选择！</p>
                            <p>前往多看阅读</p>
                        </div>
                        <img src="img/94.jpg" alt="" />
                    </a>
                </li>
                <li>
                    <a href="">
                        <div class="slider-div">
                            <h2>应用</h2>
                            <p>海量好书，享受精品阅读时光</p>
                            <p>漂亮的中文排版，千万读者选择！</p>
                            <p>前往多看阅读</p>
                        </div>
                        <img src="img/95.png" alt="" />
                    </a>
                </li>
                <li>
                    <a href="">
                        <div class="slider-div">
                            <h2>应用</h2>
                            <p>海量好书，享受精品阅读时光</p>
                            <p>漂亮的中文排版，千万读者选择！</p>
                            <p>前往多看阅读</p>
                        </div>
                        <img src="img/96.png" alt="" />
                    </a>
                </li>

            </ul>
        </div>
    </div>
    <!--<script src="js/jquery.min.js"></script>-->
    <script src="scripts/js/YuxiSlider.jQuery.min.js"></script>
    <script>
        $(".slider").YuxiSlider({
//                width:260, //容器宽度
//                height:360, //容器高度
//            control:$('.control'), //绑定控制按钮
//            during:4000, //间隔4秒自动滑动
//            speed:800, //移动速度0.8秒
//                mousewheel:true, //是否开启鼠标滚轮控制
//            direkey:true //是否开启左右箭头方向控制
        });
    </script>
    <!--</center>-->
</div>
</div>
<!--视频-->
    <div class="mi-video">
        <div class="floatEle">
            <h2>视频</h2>
            <section>查看全部 <section> > </section> </section>
        </div>
        <div class="video">
                     <figure>
                    <img src="img/99.jpg" alt="">
                         <section> <span class="glyphicon glyphicon-play"></span></section>
                         <div class="figcaption">
                    <figcaption>小米之家里发生了一件怪事 </figcaption>
                    <figcaption> World Order星机械人受邀访问</figcaption>

                         </div>
                </figure>
                <figure>
                    <img src="img/100.jpg" alt="">
                    <section> <span class="glyphicon glyphicon-play"></span></section>
                    <div class="figcaption">
                    <figcaption>小米MIX 概念手机背后的故事 </figcaption>
                    <figcaption> 雷总亲自讲述小米MIX 的诞生</figcaption>
                    </div>
                </figure>
                <figure>
                    <img src="img/101.jpg" alt="">
                    <section> <span class="glyphicon glyphicon-play"></span></section>
                    <div class="figcaption">
                    <figcaption>一面科技，一面艺术 </figcaption>
                    <figcaption> 梁朝伟讲述双面人生</figcaption>
                    </div>
                </figure>
                <figure>
                    <img src="img/102.jpg" alt="">
                    <section> <span class="glyphicon glyphicon-play"></span></section>
                    <div class="figcaption">
                    <figcaption>小米MIX手机设计哲学 </figcaption>
                    <figcaption> 小米MIX手机设计哲学</figcaption>
                    </div>
                 </figure>
            </div>
</div>
    <div  style="height: 70px;"></div>
</div>
 </div>

<!--footer-->
<footer>
    <div class="footer-content">
    <div class="mi-footer">
        <div class="mi-footer-server">
            <div ><span class="glyphicon glyphicon-wrench"></span><a href="">预约维修服务</a></div>
            <section></section>
            <div><span class="glyphicon glyphicon-link"></span><a href="">7天无理由退货</a></div>
            <section></section>
            <div><span class="glyphicon glyphicon-paperclip"></span><a href="">15天免费换货</a></div>
            <section></section>
            <div><span class="glyphicon glyphicon-briefcase"></span><a href="">满150元包邮</a></div>
            <section></section>
            <div><span class="glyphicon glyphicon-floppy-saved"></span><a href="">520余家售后网点</a></div>
        </div>
    </div>
    <div class="footer-helper">
        <div class="footer-helper-left">
            <div>
                <ul>
                    <li>帮助中心</li>
                    <li><a href="">账户管理</a></li>
                    <li><a href="">购物指南</a></li>
                    <li><a href="">订单操作</a></li>
                </ul>
            </div>
            <div>
                <ul>
                    <li>帮助中心</li>
                    <li><a href="">账户管理</a></li>
                    <li><a href="">购物指南</a></li>
                    <li><a href="">订单操作</a></li>
                </ul>
            </div>
            <div>
                <ul>
                    <li>帮助中心</li>
                    <li><a href="">账户管理</a></li>
                    <li><a href="">购物指南</a></li>
                    <li><a href="">订单操作</a></li>
                </ul>
            </div>
            <div>
                <ul>
                    <li>帮助中心</li>
                    <li><a href="">账户管理</a></li>
                    <li><a href="">购物指南</a></li>
                    <li><a href="">订单操作</a></li>
                </ul>
            </div>
            <div>
                <ul>
                    <li>帮助中心</li>
                    <li><a href="">账户管理</a></li>
                    <li><a href="">购物指南</a></li>
                    <li><a href="">订单操作</a></li>
                </ul>
            </div>
            <div>
                <ul>
                    <li>帮助中心</li>
                    <li><a href="">账户管理</a></li>
                    <li><a href="">购物指南</a></li>
                    <li><a href="">订单操作</a></li>
                </ul>
            </div>

        </div>
        <section></section>
        <div class="footer-helper-right">
            <p>400-100-5678</p>
            <p>1月27日至2月2日服务时间 9:00-18:00</p>
            <p> <span class="glyphicon glyphicon-comment"></span>24小时在线客服</p>
        </div>
    </div>
    </div>
</footer>
<div class="footer-last">
<div class="footer-last-all">
    <div class="footer-last-left">
    <img src="img/1.png" alt="">
     <div>
         <ul>
             <li><a href="">小米商城</a></li>
             <section></section>
             <li><a href="">MIUI</a></li>
             <section></section>
             <li><a href="">米聊</a></li>
             <section></section>
             <li><a href="">游戏</a></li>
             <section></section>
             <li><a href="">多看阅读</a></li>
             <section></section>
             <li><a href="">云服务</a></li>
             <section></section>
             <li><a href="">金融</a></li>
             <section></section>
             <li><a href="">小米商城移动版</a></li>
             <section></section>
             <li><a href="">问题反馈</a></li>
             <section></section>
             <li><a href="">Select Region</a></li>
         </ul>
         <p>©mi.com 京ICP证110507号 &#x3000京ICP备10046444号 &#x3000京公网安备11010802020134号&#x3000京网文[2014]0059-0009</p>
         <p>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
     </div>
     <section style="margin-left: 5px">
         <img src="img/103.png" alt="" style="width: 80px;">
         <img src="img/104.png" alt="">
         <img src="img/105.png" alt="">
         <img src="img/106.png" alt="">
     </section>

    </div>
    <div class="last">
        探索黑科技，小米为发烧而生
    </div>
</div>
</div>

</body>
</html>
<script src="scripts/js/index.js"></script>